<!-- 今日出勤 -->
<template>
  <div>
    <v-echarts :options="options" autoresize :class="$style.echartStyle"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/tooltip'
  export default {
    components: { 'v-echarts': ECharts },
    data () {
      return {}
    },

    computed: {
      options () {
        return {
      //     title: {
      //       text: '世界人口总量',
      //       subtext: '数据来自网络'
      // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['系统人数', '打卡人数'],
          color: '#fff'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['系统人数/打卡人数']
        },
        series: [
          {
            name: '系统人数',
            type: 'bar',
            data: [1000, 500],
            color:'#1196F6',
            barMaxWidth: 20
          },
          {
            name: '打卡人数',
            type: 'bar',
            data: [600],
            color: '#51FCB7',
            barMaxWidth: 20
          }
        ]
        }
      }
    },

    methods: {},
    created () {},
    beforeDestroy () {
      clearInterval(this.timer0)
    }
  }

</script>
<style lang='scss' module>
  .echartStyle{
    width: 100%;
    height: 220px;
    margin: 0 auto;
  }
</style>
